<template>
  <div class="api-code">
    <div class="api-code-header">
      <span class="api-code-header-title">示例</span>
    </div>

    <div class="api-code-content">
      <div class="api-code-url">
        <span class="method" :class="{get: method.toLowerCase() === 'get'}">{{ method }}</span>
        <div>{{ url | urlFormat }}</div>

          <div class="api-code-copy" @mouseout="changeCopyIcon('url')">
            <div @click="copyToClipboard('url', url)" v-if="!copyFlag.url">
              <a-icon type="copy" theme="filled" />
            </div>
            <div
              class="api-code-check"
              v-if="copyFlag.url"
            >
              <a-icon type="check" />
            </div>
          </div>

      </div>

      <div class="api-code-param">
        <ul>
          <li
            :class="{active: item.isActive}"
            v-for="item in paramData"
            :key="item.name"
            @click="changeParam(item)"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="api-code-copy" @mouseout="changeCopyIcon('params')">
          <div @click="copyToClipboard('params', jsonData)" v-if="!copyFlag.params">
            <a-icon type="copy" theme="filled" />
          </div>
          <div
            class="api-code-check"
            v-if="copyFlag.params"
          >
            <a-icon type="check" />
          </div>
        </div>
      </div>
      <json-view
        :data="jsonData"
        :theme="theme"
        :deep="deep"
        :iconStyle="iconStyle"
        :fontSize="fontSize"
        :lineHeight="lineHeight"
        :closed="closed"
        :iconColor="iconColor"
      />

    </div>
  </div>
</template>

<script>
import JsonView from '@/page/components/json-view/index.vue'
import { copyToClipboard, formatUrl } from '@/util/util'

const json = {
  a: '1',
  b: '2'
}

export default {
  name: 'ApiCode',
  components: { JsonView },
  props: {
    method: {
      type: String,
      default: () => 'get'
    },
    url: {
      type: String,
      required: true,
      default: 'url'
    },
    fields: {
      type: Array,
      default: () => [
        {
          name: 'name',
          type: 'int',
          isRequired: true,
          desc: '名称'
        }
      ]
    }
  },
  data () {
    return {
      copyFlag: {
        url: false,
        params: false
      },
      params: [
        { name: 'Header', isActive: false, data: { "content-type": "application/json" } },
        { name: 'Body', isActive: true, data: { ...json } },
        { name: 'Params', isActive: false, data: {} }
      ],
      getParam: [{ name: 'Params', isActive: true, data: {} }],
      postParam: [
        { name: 'Header', isActive: false, data: { "content-type": "application/json" } },
        { name: 'Body', isActive: true, data: { ...json } },
      ],
      json,
      theme: 'cgs-dark',
      fontSize: 14,
      lineHeight: 24,
      deep: 3,
      closed: false,
      iconStyle: 'triangle',
      color1: '',
      color2: '',
      activeName: '',
    }
  },
  methods: {
    changeCopyIcon (type) {
      if (this.copyFlag[type]) {
        setTimeout(() => { this.copyFlag[type] = false }, 3000)
      }
    },
    copyToClipboard (type, content) {
      let text = content
      if (content instanceof Object) {
        text = JSON.stringify(content, null, 4)
      } else if (type === 'url') {
        text = formatUrl(content)
      }
      copyToClipboard(text).then(() => {
        this.copyFlag[type] = true
      })
    },
    changeParam (item) {
      this.activeName = item.name
    },
    getFieldData () {
      return this.fields.reduce((previousValue, currentValue) => {
        if (currentValue.value !== null && currentValue.value !== undefined) {
          previousValue[currentValue.name] = currentValue.value
        } else {
          previousValue[currentValue.name] = ''
        }
        return previousValue
      }, {})
    }
  },
  computed: {
    iconColor () {
      const { color1, color2 } = this;
      if (color1 && color2) {
        return [color1, color2];
      } else {
        return [];
      }
    },
    paramData () {
      if (this.method.toLowerCase() === 'get') {
        let activeName = this.activeName
        if (activeName === '') {
          activeName = 'Params'
        }
        this.getParam.map(p => {
          p.isActive = p.name === activeName;
          if (p.name === "Params") {
            p.data = this.getFieldData()
          }
        })
        return this.getParam
      } else {
        let activeName = this.activeName
        if (activeName === '') {
          activeName = 'Body'
        }
        this.postParam.map(p => {
          p.isActive = p.name === activeName;
          if (p.name === "Body") {
            p.data = this.getFieldData()
          }
        })
        return this.postParam
      }
    },
    jsonData () {
      const t = this.paramData.find(p => p.isActive)
      return t.data
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../worksheet-api";
  @import "./css/api-code";
</style>
